<template>
	<view class="container">

		<view class="head">
			<view class="left">
				<image
					src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%88%91%E7%9A%84/%E8%AE%BE%E7%BD%AE.png"
					mode="aspectFit"></image>
			</view>
			<view class="right">
				<image
					src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%88%91%E7%9A%84/%E6%89%AB%E7%A0%81.png"
					mode="aspectFit"></image>
			</view>
		</view>


		<view class="message">
			<!-- 顶部区域 -->
			<view class="top">
				<image src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%88%91%E7%9A%84/1.png"
					mode="scaleToFill"></image>
			</view>
		</view>

		<view class="mything">
			<view class="top">
				<view class="item">
					<image
						src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%88%91%E7%9A%84/%E6%88%91%E7%9A%84%E6%94%B6%E8%97%8F.png"
						mode="aspectFit"></image>
					<view class="text">
						我的收藏
					</view>
				</view>
				<view class="item">
					<image
						src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%88%91%E7%9A%84/%E6%88%91%E7%9A%84%E7%82%B9%E8%B5%9E.png"
						mode="aspectFit"></image>
					<view class="text">
						我的点赞
					</view>
				</view>
				<view class="item">
					<image
						src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%88%91%E7%9A%84/%E6%88%91%E7%9A%84%E7%82%B9%E4%BA%AE.png"
						mode="aspectFit"></image>
					<view class="text">
						我的点亮
					</view>
				</view>
			</view>

		</view>

		<view class="wish">
			<image
				src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%88%91%E7%9A%84/%E6%88%91%E7%9A%84%E5%BF%83%E6%84%BF.png"
				mode="aspectFit"></image>
		</view>

		<view class="services">
			<view class="title">更多服务</view>

			<view class="grid-container">
				<view class="item">
					<image
						src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%88%91%E7%9A%84/%E5%9C%B0%E5%9D%80.png"
						mode="aspectFit"></image>
					<view class="text">
						地址
					</view>
				</view>

				<navigator url="/pages/dati/dati" class="item">
					<image
						src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%88%91%E7%9A%84/%E7%AD%94%E9%A2%98.png"
						mode="aspectFit"></image>
					<view class="text">
						答题
					</view>
				</navigator>

				<view class="item">
					<image
						src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%88%91%E7%9A%84/%E5%81%8F%E5%A5%BD.png"
						mode="aspectFit"></image>
					<view class="text">
						偏好
					</view>
				</view>
				<view class="item">
					<image
						src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%88%91%E7%9A%84/%E5%AE%A2%E6%9C%8D.png"
						mode="aspectFit"></image>
					<view class="text">
						客服
					</view>
				</view>

				<view class="item">
					<image
						src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%88%91%E7%9A%84/%E5%A4%A9%E6%B0%94.png"
						mode="aspectFit"></image>
					<view class="text">
						天气
					</view>
				</view>

				<view class="item">
					<image
						src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%88%91%E7%9A%84/%E7%89%A9%E6%B5%81.png"
						mode="aspectFit"></image>
					<view class="text">
						物流
					</view>
				</view>

				<navigator url="/pages/fuli/fuli" class="item">
					<image
						src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%88%91%E7%9A%84/%E7%A6%8F%E5%88%A9.png"
						mode="aspectFit"></image>
					<view class="text">
						福利值
					</view>
				</navigator>
			</view>
		</view>


	</view>
</template>


<style lang="scss" scoped>
	.head {
		width: 100%;
		height: 60rpx;
		/* 容器高度适当增加 */
		display: flex;
		justify-content: space-between;
		/* 两端对齐 */
		align-items: center;
		/* 垂直居中 */
		background-color: #ffbcdd;

		.left,
		.right {
			padding: 0 30rpx;
			width: 60rpx;
			height: 60rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.message {
		width: 100%;
		position: relative;
		background-color: #fff; // 可选背景色

		// 顶部区域
		.top {
			height: 240rpx; // 固定高度，留出空间给.down

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.mything {
		padding: 30rpx;

		/* 容器外间距 */
		.top {
			display: flex;
			justify-content: space-around;
			/* 均匀分布 */
			gap: 30rpx;
			/* item之间的间距 */

			.item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 10rpx;
				/* 图片文字间距 */

				image {
					width: 100rpx;
					/* 建议固定图片尺寸 */
					height: 80rpx;
					display: block;
				}

				.text {
					font-size: 24rpx;
					color: #333;
					white-space: nowrap;
					/* 防止文字换行 */
				}
			}
		}
	}

	.wish {
		height: 300rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.services {
		padding: 30rpx;
		box-sizing: border-box;

		/* 标题样式 */
		.title {
			font-size: 34rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 40rpx;
			padding-left: 10rpx;
		}

		/* 网格容器 */
		.grid-container {
			display: grid;
			grid-template-columns: repeat(5, 1fr); // 每行5列
			gap: 30rpx; // 网格间距

			/* 单个服务项 */
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 5rpx; // 图文间距

				/* 图片样式 */
				image {
					width: 80rpx;
					height: 80rpx;
					display: block;
					border-radius: 16rpx;
				}

				/* 文字样式 */
				.label {
					font-size: 24rpx;
					color: #666;
					white-space: nowrap;
					line-height: 1.4;
				}
			}
		}
	}
</style>
